<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>院校拜访记录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7System.out.println(); -->
    <!--link导入外部的css，js样式，如果导入的资源和本页面在同一个文件夹下，直接文件名即可-->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <!-- jQuery 3 -->
    <script th:src="@{/asserts/bower_components/jquery/dist/jquery.min.js}"></script>
    <!-- Bootstrap 3.3.7 -->
    <script th:src="@{/asserts/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- DataTables -->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/asserts/dist/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/asserts/dist/css/skins/_all-skins.min.css}">

    <script th:src="@{/asserts/Apolar_sh/lib/layer/2.4/layer.js}"></script>

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    <style type="text/css">
        .search {
            margin-top: 40px;
            margin-left: 40px;
            position: relative;
        }

        #MyTable td {
            text-align: center;
        }

        th {
            text-align: center;
        }

        #top {
            background-color: rgba(172, 175, 175, 0.78);
            display: none;
            position: fixed;
            right: -3px;
            bottom: 50px;
        }

        #top a {
            color: rgba(61, 61, 61, 0.91);
            font-size: 45px;
        }

        #home {
            display: block;
            position: absolute;
            right: 10px;
            top: 8px;
            z-index: 9999;
            font-size: 30px;
        }

        #refresh {
            display: block;
            position: absolute;
            right: 46px;
            top: 10px;
            z-index: 9999;
            font-size: 26px;
        }
    </style>

</head>
<body>


<a name="up"></a>
<span>
    <a id="refresh" class="fa fa-refresh"  href="javascript:location.reload()"></a>
    <a id="home" class="fa fa-home" th:href="@{/user/list}"></a>
</span>
<div class="wrapper">
    <!-- Content Wrapper. Contains page content -->
    <!-- Content Header (Page header) -->
    <!-- Main content -->
    <section class="content-header">
        <h4>
            <i class="fa fa-search"></i> 搜索员工人员
        </h4>

    </section>
    <div class="search" style="margin-top: 15px">
        <div class="row">
            <div hidden class="col-xs-2">
                <a class="btn btn-danger" th:onclick="submit()">
                    <i class="fa fa-trash"></i> 批量删除
                </a>&nbsp;
            </div>
            <div class="col-xs-6">
                <form class="form-inline" method="post" id="searchFrom"
                      th:action="@{/user/search(pageSize=${pageBean==null?5:pageBean.pageSize},currentPage=1)}">
                    <div class="form-group">
                        <label for="personname">姓名：</label>
                        <input type="text" class="form-control" name="personname" id="personname" th:value="${personname}" placeholder="请输入姓名">
                    </div>
                    <button type="submit" class="btn btn-success"><i class="fa fa-search"></i> 搜索</button>
                </form>
            </div>
            <div class="col-xs-6">
                <a class="btn btn-info" th:if="${info==null}"
                    th:href="@{/user/addUI(pageSize=${pageBean.pageSize},currentPage=${pageBean.pageNum},searchUrl=${searchUrl})}">
                    <i class="fa fa-plus"></i> 添加员工
                </a>
                <a class="btn btn-info" th:if="${info!=null}"
                   th:href="@{/user/addUI(pageSize=5,currentPage=1,searchUrl=${searchUrl})}">
                    <i class="fa fa-plus"></i> 添加员工
                </a>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</div>

<div class="wrapper">
    <!-- Content Wrapper. Contains page content -->
    <!-- Content Header (Page header) -->
    <section class="content-header" style="padding-bottom: 0px">
        <i th:if="${searchUrl==null}" class="fa fa-navicon col-sm-2 control-label" style="margin-top: 4px">员工人员列表</i>
        <i th:if="${searchUrl!=null}" class="fa fa-navicon col-sm-2 control-label" style="margin-top: 4px">搜索结果列表</i>
        <span th:if="${info==null||pageBean!=null}" style="margin-bottom: 0px">每页显示：</span>
        <span class="control-label">
                    <select th:if="${info==null||pageBean!=null}" class="" name="pageSize" id="pageSize"
                            th:onchange="changePage([[${searchUrl}]])">
                        <option th:selected="${pageBean.pageSize==5}" value="5">&nbsp;5</option>
                        <option th:selected="${pageBean.pageSize==10}" value="10">10</option>
                        <option th:selected="${pageBean.pageSize==20}" value="20">20</option>
                    </select>
                </span>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <!-- /.box-header 部门列表的显示  table  表格  th/td单元个   th字体加粗，行标题-->
                    <div class="box-body" th:if="${info==null}">
                        <form th:action="@{/user/delete(pageSize=${pageBean.pageSize},currentPage=${pageBean.pageNum},searchUrl=${searchUrl})}"
                              id="myForm" method="post">
                            <table id="MyTable" class="table table-bordered table-hover">
                                <tbody>
                                <tr>
                                    <th hidden><label><input type="checkbox" id="all" onchange="checkAllId(this)"/>全选</label></th>
                                    <th>账号</th>
                                    <th>姓名</th>
                                    <th>部门</th>
                                    <th>职务</th>
                                    <th>级别</th>
                                    <th>备注</th>
                                    <th>操作</th>
                                </tr>
                                <tr th:each="u:${pageBean.list}">
                                    <td hidden>
                                        <input  type="checkbox" name="checks" id="checks" class="checks" onchange="recordId(this)"
                                        th:value="${u.uid}"/>
                                    </td>
                                    <td th:text="${u.username}">admin</td>
                                    <td th:text="${u.personname}">姓名</td>
                                    <td th:text="${u.department}">管理员</td>
                                    <td th:text="${u.job}">职位</td>
                                    <td th:text="${u.authority}">权限等级</td>
                                    <td th:text="${u.remark}">备注</td>
                                    <td>
                                        <a class="btn btn-warning" th:href="@{/user/modifyUI(uid=${u.uid},currentPage=${pageBean.pageNum},pageSize=${pageBean.pageSize},searchUrl=${searchUrl})}">
                                            <i class="fa fa-edit"></i> 修改
                                        </a>
                                        <div hidden>
                                            <a class="btn btn-danger" th:onclick="submitDelete([[${u.uid}]])">
                                                <i class="fa fa-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </form>

                        <!-- 分页 -->
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a th:if="${pageBean.pageNum != 1 && searchUrl == null}"
                                       th:href="@{/user/list(currentPage=1,pageSize=${pageBean.pageSize})}">首页</a>
                                    <a th:if="${pageBean.pageNum==1}"
                                       href="javascript:void(0)">首页</a>
                                    <a th:if="${pageBean.pageNum!=1 && searchUrl!=null }"
                                       th:href="@{${searchUrl}(currentPage=1,pageSize=${pageBean.pageSize})}">首页</a>
                                </li>

                                <li th:if="${pageBean.pageNum!=1 && searchUrl==null }">
                                    <a th:href="@{/user/list(currentPage=${pageBean.pageNum-1},pageSize=${pageBean.pageSize})}"
                                       aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="disabled" th:if="${pageBean.pageNum==1 }">
                                    <a href="javascript:void(0)" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li th:if="${pageBean.pageNum!=1 && searchUrl!=null }">
                                    <a th:href="@{${searchUrl}(currentPage=${pageBean.pageNum-1},pageSize=${pageBean.pageSize})}"
                                       aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>

                                <li th:classappend="${pageBean.pageNum==pageIndex}?'active':''"
                                    th:each="pageIndex:${pageValue}">
                                    <a href="javascipt:void(0)"
                                       th:if="${pageBean.pageNum==pageIndex}"
                                       th:text="${pageIndex}"></a>
                                    <a th:if="${pageIndex==-1}" style="cursor: default;opacity: 0.6;">
                                        ...
                                    </a>
                                    <a th:if="${pageBean.pageNum!=pageIndex&&pageIndex!=-1 && searchUrl==null}"
                                       th:href="@{/user/list(currentPage=${pageIndex},pageSize=${pageBean.pageSize})}"
                                       th:text="${pageIndex}"></a>
                                    <a th:if="${pageBean.pageNum!=pageIndex&&pageIndex!=-1 && searchUrl!=null}"
                                       th:href="@{${searchUrl}(currentPage=${pageIndex},pageSize=${pageBean.pageSize})}"
                                       th:text="${pageIndex}"></a>
                                </li>

                                <li class="disabled" th:if="${pageBean.pageNum==pageBean.pages }">
                                    <a href="javascript:void(0)" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li th:if="${pageBean.pageNum!=pageBean.pages &&searchUrl==null }">
                                    <a th:href="@{/user/list(currentPage=${pageBean.pageNum+1},pageSize=${pageBean.pageSize})}"
                                       aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li th:if="${pageBean.pageNum!=pageBean.pages &&searchUrl!=null }">
                                    <a th:href="@{${searchUrl}(currentPage=${pageBean.pageNum+1},pageSize=${pageBean.pageSize})}"
                                       aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>

                                <li>
                                    <a th:if="${pageBean.pageNum!=pageBean.pages &&searchUrl==null  }"
                                       th:href="@{/user/list(currentPage=${pageBean.pages},pageSize=${pageBean.pageSize})}">末页</a>
                                    <a th:if="${pageBean.pageNum==pageBean.pages }"
                                       href="javascript:void(0)">末页</a>
                                    <a th:if="${pageBean.pageNum!=pageBean.pages &&searchUrl!=null  }"
                                       th:href="@{${searchUrl}(currentPage=${pageBean.pages},pageSize=${pageBean.pageSize})}">末页</a>
                                </li>

                            </ul>
                        </nav>
                        <!--分页-->
                    </div>
                    <div id="top">
                        <a href="#up" title="回到顶部" class="fa fa-angle-double-up"></a>
                    </div>
                    <div th:if="${info!=null}" class="box-body">
                        <h2 style="text-align:center" th:text="${info}"></h2>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<!-- ./wrapper -->


<!-- DataTables -->
<script th:src="@{/asserts/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/asserts/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/asserts/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/asserts/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/asserts/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/asserts/dist/js/demo.js}"></script>
<!-- page script -->
<script>

    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 150) {
                $('#top').css('display', 'block');    //<div id-'top'></div>假如有这么个div是那个向上图标的div。css默认none
            } else {
                $('#top').css('display', 'none');
            }
        });
    });

    $("#all").click(function () {
        if (this.checked) {
            $(".checks").prop("checked", true);
        } else {
            $(".checks").prop("checked", false);
        }
    });

    function changePage(searchUrl) {
        if (searchUrl != null && searchUrl.trim() != "") {
            window.location.href = '[[${#httpServletRequest.getContextPath()}]]' + searchUrl + '&pageSize=' + $("#pageSize").val();
        } else {
            window.location.href = '[[${#httpServletRequest.getContextPath()}]]/user/list?pageSize=' + $("#pageSize").val();
        }
    }

    var idArr = [];
    /*记住单个id*/
    function recordId(obj) {
        if (idArr.length === 0 || obj.checked === true) {
            idArr.push(obj.value);
        } else {
            for (var index in idArr) {
                if (idArr[index] === obj.value) {
                    delete idArr[index];
                }
            }
        }
    }
    /*记录所有id*/
    function checkAllId(obj) {

        var checknames = document.getElementsByName("checks");
        for (var i = 0; i < checknames.length; i++) {
            checknames[i].checked = obj.checked;
            if (obj.checked) {
                idArr.push(checknames[i].value);
            } else {
                idArr.length = 0;
            }
        }
    }
    function submit() {
        var flag = true;
        for (var index in idArr) {
            if (idArr[index] != null) {
                flag = false;
            }
        }
        if (idArr.length == 0 || flag) {
            layer.msg('亲，请先选择要删除的项哦!', {
                icon: 0,
                time: 1500
            });
        } else{
            layer.confirm("确认删除？",
                {
                    btn: ['确定', '取消'] //按钮
                },
                function () {
                    var checks = idArr.toString();
                    $.ajax({
                        type: 'POST',
                        url: "[[${#httpServletRequest.getContextPath()}]]"+"/user/delete?checks="+checks,
                        success: function (data) {
                            if (data.id === 0) {
                                layer.msg(data.data, {
                                    icon: 1,
                                    time: 500
                                });
                                setTimeout(function () {
                                    location.replace(location.href);
                                }, 500);
                            } else {
                                layer.msg(data.data, {
                                    icon: 0,
                                    time: 2000
                                });
                            }
                        },
                        error: function (data) {
                            console.log(data.msg);
                        }
                    });
                },
                function () {
                    layer.msg('已取消！', {icon: 0});
                    return false;
                }
            );
        }

    };
    function submitDelete(uid) {
        layer.confirm("确认删除？",
            {
                btn: ['确定', '取消'] //按钮
            },
            function () {
                $.ajax({
                    type: 'POST',
                    url: "[[${#httpServletRequest.getContextPath()}]]"+"/user/delete?checks="+uid,
                    success: function (data) {
                        if (data.id === 0) {
                            layer.msg(data.data, {
                                icon: 1,
                                time: 500
                            });
                            setTimeout(function () {
                                location.replace(location.href);
                            }, 500);
                        } else {
                            layer.msg(data.data, {
                                icon: 0,
                                time: 2000
                            });
                        }
                    },
                    error: function (data) {
                        console.log(data.msg);
                    }
                });
            },
            function () {
                layer.msg('已取消！', {icon: 0});
                return false;
            }
        );
    };
/*

    function submit() {
        layer.confirm("确认删除？",
            {
                btn: ['确定', '取消'] //按钮
            },
            function () {
                $("#myForm").submit();
                return true;
            },
            function () {
                layer.msg('已取消！', {icon: 0});
                return false;
            }
        );
    };

    function submitDelete(uid) {
        layer.confirm("确认删除？",
            {
                btn: ['确定', '取消'] //按钮
            },
            function () {
                window.location="[[${#httpServletRequest.getContextPath()}]]"+"/user/delete?checks="+uid+"&pageSize=[[${pageBean.pageSize}]]&currentPage=[[${pageBean.pageNum}]]&searchUrl=[[${searchUrl}]]";
            },
            function () {
                layer.msg('已取消！', {icon: 0});
                return false;
            }
        );
    };
*/

    $("#all").click(function () {
        if (this.checked) {
            $(".checks").prop("checked", true);
            $("#all").prop("value", "全不选");
        } else {
            $(".checks").prop("checked", false);
            $("#all").prop("value", "全选");
        }
    });

    /*查询的非空判定*/
    $("#searchFrom").submit(
        function () {
            var personname = $("#personname").val();
            if (personname == null || personname === "") {
                layer.msg('亲，查询内容不能为空哦!', {
                    icon: 0,
                    time: 1500
                });
                return false;
            }
            return true;
        }
    );
</script>
</body>
</html>